<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
</h:head>
<h:body>
	<f:loadBundle basename="props.lenguajes.messages" var="msg" />

	<p:panel header="#{msg['message.ide.competitor.participantes']}"
		style="font-size: 10px; border:none;">

		<h:panelGrid columns="1">
			<p:dataTable id="participantsTable" var="par"
				value="#{participantsMB.participantList}"
				selection="#{participantsMB.selectedItem}">
				<p:column
					headerText="#{msg['message.ide.competitor.numeroControl']}"
					style="font-size: 10px; font-weight:bold;">
					<h:outputLabel value="#{par.controlNumber}"
						style="width:60px; font-size: 10px; text-align:center; border-style:none;" />
				</p:column>

				<p:column
					headerText="#{msg['message.ide.competitor.nombreCompleto']}"
					style="width:150px; font-size: 10px; font-weight:bold;">
					<h:outputLabel value="#{par.fullName}"
						style="width:150px; font-size: 10px; text-align:center; border-style:none;" />
				</p:column>

				<p:column headerText="#{msg['message.ide.competitor.centroCostos']}"
					style="font-size: 10px; font-weight:bold;">
					<h:outputLabel value="#{par.cc}"
						style="width:40px; font-size: 10px; text-align:center; border-style:none;" />
				</p:column>

				<p:column headerText="#{msg['message.ide.competitor.area']}"
					style="width:70px; font-size: 10px; font-weight:bold;">
					<h:outputLabel value="#{par.area}"
						style="width:70px; font-size: 10px; text-align:center; border-style:none;" />
				</p:column>

				<p:column headerText="#{msg['message.ide.competitor.titular']}"
					style="font-size: 10px; font-weight:bold;">

				</p:column>

				<p:column headerText="#{msg['message.ide.competitor.celular']}"
					style="width:100px; font-size: 10px; font-weight:bold;">
					<h:outputLabel value="#{par.handy}"
						style="width:70px; font-size: 10px; text-align:center; border-style:none;" />
				</p:column>

				<p:column headerText="#{msg['message.ide.competitor.email']}"
					style="width:120px; font-size: 10px; font-weight:bold;">
					<h:outputLabel value="#{par.email}"
						style="width:110px; font-size: 10px; text-align:center; border-style:none;" />
				</p:column>

				<p:column headerText="#{msg['message.ide.competitor.extension']}"
					style="font-size: 10px; font-weight:bold;">
					<h:outputLabel value="#{par.extension}"
						style="width:40px; font-size: 10px; text-align:center; border-style:none;" />
				</p:column>

				<p:column headerText="#{msg['message.ide.competitor.ubicacion']}"
					style="font-size: 10px; font-weight:bold;">
					<h:outputLabel value="#{par.location}"
						style="width:50px; font-size: 10px; text-align:center; border-style:none;" />
				</p:column>

				<p:column
					headerText="#{msg['message.ide.competitor.participacion']}"
					style="font-size: 10px; font-weight:bold;">
					<h:outputLabel value="#{par.percentage}"
						style="width:30px; font-size: 10px; text-align:center; border-style:none;" />
				</p:column>
				<f:facet name="footer">
					<h:outputLabel value="#{msg['message.ide.competitor.total']}"
						style="font-size: 10px; font-weight:bold;" />
				</f:facet>
			</p:dataTable>
			<f:facet name="footer">
				<p:commandButton value="Agregar"
					style="font-size: 10px; font-weight:bold;"
					action="#{participantsMB.addAction}" />
			</f:facet>

		</h:panelGrid>
		
		<p:dialog id="newParticipantPopUp" resizable="false"
			header="#{msg['message.ide.competitor.agregarParticipante']}"
			widgetVar="newParticipant" modal="true">
			<p:messages id="messages" showDetail="true" autoUpdate="true"
				closable="true" />
			<h:panelGrid columns="2" style="text-align:right" summary="asdasd">
				<p:outputLabel
					value="#{msg['message.ide.competitor.numeroControl']}"
					style="font-size: 10px; font-weight:bold;" />
				<h:panelGrid style="text-align:left">
					<p:inputText value="#{participantsMB.participante.controlNumber}"
						style="width:150px; font-size: 10px;border-style:none;" />
				</h:panelGrid>

				<p:outputLabel
					value="#{msg['message.ide.competitor.nombreCompleto']}"
					style="font-size: 10px; font-weight:bold;" />
				<h:panelGrid style="text-align:left">
					<p:inputText value="#{participantsMB.participante.fullName}"
						style="width:150px; font-size: 10px; border-style:none;" />

				</h:panelGrid>

				<p:outputLabel value="#{msg['message.ide.competitor.centroCostos']}"
					style="font-size: 10px; font-weight:bold;" />
				<h:panelGrid style="text-align:left">
					<p:inputText value="#{participantsMB.participante.cc}"
						style="width:150px; font-size: 10px; border-style:none;" />

				</h:panelGrid>

				<p:outputLabel value="#{msg['message.ide.competitor.area']}"
					style="font-size: 10px; font-weight:bold;" />
				<h:panelGrid style="text-align:left">
					<p:inputText value="#{participantsMB.participante.area}"
						style="width:150px; font-size: 10px; border-style:none;" />

				</h:panelGrid>

				<p:outputLabel value="#{msg['message.ide.competitor.titular']}"
					style="font-size: 10px; font-weight:bold;" />
				<h:panelGrid style="text-align:left">
					<p:selectOneRadio style="font-size: 10px"
						valueChangeListener="#{participantsMB.onChange}" immediate="true">
						<f:ajax event="change" execute="@form" />
						<f:selectItem itemLabel="Si" itemValue="titular" />
						<f:selectItem itemLabel="No" itemValue="participante" />
					</p:selectOneRadio>
				</h:panelGrid>

				<p:outputLabel value="#{msg['message.ide.competitor.celular']}"
					style="font-size: 10px; font-weight:bold;" />
				<h:panelGrid style="text-align:left">
					<p:inputText id="handy"
						value="#{participantsMB.participante.handy}"
						disabled="#{participantsMB.renderHandyField}"
						style="width:150px; font-size: 10px;border-style:none;" />

				</h:panelGrid>

				<p:outputLabel value="#{msg['message.ide.competitor.email']}"
					style="font-size: 10px; font-weight:bold;" />
				<h:panelGrid style="text-align:left">
					<p:inputText id="email"
						value="#{participantsMB.participante.email}"
						disabled="#{participantsMB.renderEmailField}"
						style="width:150px; font-size: 10px;border-style:none;" />

				</h:panelGrid>

				<p:outputLabel value="#{msg['message.ide.competitor.extension']}"
					style="font-size: 10px; font-weight:bold;" />
				<h:panelGrid style="text-align:left">
					<p:inputText value="#{participantsMB.participante.extension}"
						style="width:150px; font-size: 10px; border-style:none;" />

				</h:panelGrid>

				<p:outputLabel value="#{msg['message.ide.competitor.ubicacion']}"
					style="font-size: 10px; font-weight:bold;" />
				<h:panelGrid style="text-align:left">
					<p:inputText id="location"
						value="#{participantsMB.participante.location}"
						disabled="#{participantsMB.renderLocationField}"
						style="width:150px; font-size: 10px; border-style:none;" />

				</h:panelGrid>

				<p:outputLabel
					value="#{msg['message.ide.competitor.participacion']}"
					style="font-size: 10px; font-weight:bold;" />
				<h:panelGrid style="text-align:left">
					<p:inputText value="#{participantsMB.participante.percentage}"
						style="width:150px; font-size: 10px;border-style:none;" />
				</h:panelGrid>
			</h:panelGrid>
			<h:panelGrid columns="2" style="text-alig:center">
				<p:commandButton rendered="#{participantsMB.renderButton}"
					action="#{participantsMB.registerNewParticipant}"
					value="#{msg['message.ide.competitor.agregar']}"
					style="font-size: 10px; font-weight:bold;" />
				<p:commandButton rendered="#{participantsMB.renderButton}"
					action="#{participantsMB.cancelar}"
					value="#{msg['message.ide.competitor.cancelar']}"
					style="font-size: 10px; font-weight:bold;" />
			</h:panelGrid>
		</p:dialog>
	</p:panel>
	
	<p:confirmDialog id="attempToAddUsers" global="true" showEffect="fade"
		hideEffect="explode">
		<p:commandButton value="OK" type="button"
			styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
	</p:confirmDialog>

</h:body>
</html>
